<template>
  <div class='header-container'>
    <div @click="handleClick(index)" lass="item" v-for="(item, index) in data"
      :class="{ active: index === state.activeIndex }" :key="index">{{ item.title }} {{ typeof index }}</div>
  </div>
</template>

<script lang='ts' setup>
import { ref, reactive } from 'vue';

interface DataItem {
  title: string;
  content: string;
}

const props = defineProps({
  data: {
    type: [] as DataItem[],
    default: () => []
  }
})

const state = reactive({
  activeIndex: 0
})

const emits = defineEmits(['click'])

const handleClick = (index: number) => {
  state.activeIndex = index
  emits('click', index)
}
</script>
<style scoped lang='scss'>
.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .item {
    flex: 1
  }

  .active {
    color: red;
  }
}
</style>